    <!--前言-->
<!--浏览器：本质上是一个解析引擎，可以把 HTML 代码解析成人类更容易接受的界面。-->
<!--HTML：浏览器能直接解析的一套代码，这套代码是一种标记，能被浏览器直接识别并解析。这套标记形成一套语言——超文本标记语言（hyper text marked language）-->
<!--标签：以<xx>开始，以</xx>结束称为标签。有些标签中间不能加内容，例如<img /> 开闭同体标签。-->
<!--元素:标签和其内容称为元素。例如：<h1>你好</h1>。-->
<!--属性：在元素或者标签内，可以以 key="value" 形式给元素或者标签添加特性。这些特性称为属性。例如<h1 width="100px">你好</h1>。-->
<!--所有的浏览器都有调试工具。右键 -> 检查/查看元素，统一的快捷键 F12.-->


<!-- 文档的版本声明，告知浏览器启动什么版本的解析引擎 -->
<!--html4.01 文档声明-->
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">-->
<!--html5 文档声明:虽然不展示头约束了,但实际是有的,且以前需要先装插件才能加载视频，而h5不用了-->
<!DOCTYPE html>

<!--TIPS：在实际开发过程中，可以使用快捷键快速生成标准的文档结构：!(英文) + Tab-->

<!-- 标准 HTML5 文档结构 -->
<html lang="en">

    <!-- 页面的头:告知浏览器的预设(解析前的相关设置)，在 head 中一般通过<meta>标签指定浏览器预设值 -->
    <head>
        <!-- 字符集 -->
        <meta charset="UTF-8">
        <!-- 浏览器视口 -->
        <!-- width：控制 viewport 的宽度，这个值可以被指定，例如：500px。亦或者是“device-width”，意思是设置视口宽度为设备宽度。
             height：控制 viewport 的高度（不常用）。
             initial-scale：初始缩放比例，即每一次加载时页面缩放的比例。
             maximum-scale：允许用户缩放到的最大缩放比例。
             minimum-scale：允许用户缩放到的最小缩放比例。
             user-scaleable：是否允许用户缩放，可以传“yes”或“no”-->
        <!--设置视口不允许用于缩放-->
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scaleable=no">
        <!-- seo 优化 -->
        <meta name="keywords" content="小米,小米 9,小米 cc9,Redmi K20,Redmi Note 7, 小米 MIX3,小米商城" />
        <meta name="description" content="为发烧而生" />
        <!-- IE -->
        <!-- 启动 IE 浏览器指定的 edge 文档模式 -->
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <!-- 标题 -->
        <title>网页头上名字</title>
    </head>

    <!-- 页面体:用户能看到的界面，body 中放要解析的 html 代码 -->
    <body>
    <!--1、emmet 表达式的使用-->
        <!-- emmet 表达式:能让开发者快速书写 HTML(来自未来的提示:其实就是选择器) -->
        <!-- 统一使用 tab 作为快捷键(写下注释部分代码后按下就能起到在它下面那样的效果) -->
        <!-- div -->
        <div></div>
        <!-- div*3 -->
        <div></div>
        <div></div>
        <div></div>
        <!-- div#main1 -->
        <div id="main1"></div>
        <!-- div.red -->
        <div class="red"></div>
        <!-- div>div -->
        <div>
            <div></div>
        </div>
        <!-- div#main2>div -->
        <div id="main2">
            <div></div>
        </div>
        <!-- div{helleworld} -->
        <div>helloworld</div>
        <!-- img[src=123.png] -->
        <img src="123.png" alt="">
        <!-- div>img+div -->
        <div>
            <img src="" alt="">
            <div></div>
        </div>
        <!-- h${我是标题$}*6 -->
        <h1>我是标题1</h1>
        <h2>我是标题2</h2>
        <h3>我是标题3</h3>
        <h4>我是标题4</h4>
        <h5>我是标题5</h5>
        <h6>我是标题6</h6>


    <!--2、HTML 核心标签-->
            <!--HTML 标签根据排版规则可以分为 2 类：
                    块标签([1] 独占一行，垂直方向排列  [2] 能设置宽高)、
                    行内标签（[1] 在一行内并排排列,水平方向排列  [2] 不能设置宽高）
                 标签根据语义化特性可以分为 2 类：
                    有语义化标签：有特定用途的/含义的标签称为有语义标签。例如:img、video、audio 等。
                    无语义化标签：没有特定用途/含义的标签 => 什么都可以显示 => 一般作为其他标签的容器使用。
            -->

        <!--块标签-->
            <!-- 1.div：块容器，无语义块标签，一般作用容器用于布局。 -->
            <div style="background: red;">hello world</div>
            <div style="height: 40px;background:green;">hello world2</div> test
            <!--2.标题：h1-h6，有语义块标签，专门用于标题的显示。-->
            <h1 style="background: red;">我是标题 1</h1>
            <h2>我是标题 2</h2>
            <h3>我是标题 3</h3>
            <h4>我是标题 4</h4>
            <h5>我是标题 5</h5>
            <h6>我是标题 6</h6>
            <!--3.列表：ol (ordered list) 有语义块标签，表示有序列表，其中 li 表示列表项，位于 ol 标签中。(有序就是前面有1./2./3.)
                       ul (unordered list) 有语义块标签，表示无序列表，li 表示列表项，位于 ul 标签中(无序就是前面只有 · 这样的)-->
            <ol>
                <li >我是列表项 1</li>
                <li>我是列表项 2</li>
                <li>我是列表项 3</li>
            </ol>
            <ul>
                <li>我是列表项 1</li>
                <li>我是列表项 2</li>
                <li>我是列表项 3</li>
            </ul>
            <!--注意：li 列表项目不能单独使用。-->

            <!--dl (defined list) 有语义块标签，定义列表。专门用于对名词的解释说明。
                dt (defined title) 表示定义列表的标题。
                dd (defined description) 表示定义列表描述，用于对 dt 的解释说明。-->
                <!--注意：一个 dl 标签下一般有一个 dt 和多个 dd。-->
            <dl>
                <dt>程序员鼓励师</dt>
                <dd>1、长相清新，声线甜美，微笑常在，人见人爱；</dd>
                <dd>2、善于倾听，善不善沟通不重要，能忍受 IT 工程师死宅无法交流的性格；</dd>
                <dd>3、耍不耍脾气不重要，要善于发现每一个程序暖男的天性，成功驯服；</dd>
                <dd>4、了解互联网，懂科技，不然聊起来云里雾里，工程师会更受打击。</dd>
            </dl>
            <!--4.table 表格：表格是由行 tr 构成的，行是列(单元格)td 构成。-->
            <table border="1">
                <tr>
                    <!--合并单元格：colspan = n:单元格向右跨 n 列(写 1 时就在原位置，写 2 后就把另外一格挤出去了)-->
                    <td colspan="1">aa1</td>
                    <td colspan="2">aa2</td>
                    <td>aa3</td>
                </tr>
                    <!--rowspan = n:单元格向下跨 n 行，把其他单元格挤到右边。
                    (1跟上面同理，2就有趣了，因为虽然是向下但却把下面被挤出去的部分挤到右边去了)-->
                <tr>
                    <td rowspan="1">aa1</td>
                    <td rowspan="2">aa2</td>
                    <td>aa3</td>
                </tr>
                <tr>
                    <td>aa1</td>
                    <td>aa2</td>
                    <td>aa3</td>
                </tr>
            </table>
            <!--5.p：段落:有语义块标签，表示段落。-->
                <h2>日本一公司试飞“飞行汽车”：高度 3 米，期待 2030 能载人</h2>
                <p style="background:red;">据《联合早报》报道，试飞在日本电气公司位于东京市郊的测试
                    场地进行，为安全起见，飞行器升降全程都在一个巨笼中进行。试飞前，测试人员再三检查了飞行器，
                    并让在场记者戴上安全帽。一切准备就绪后，测试人员进行了两次简短的试飞演示。</p>
                <p>近几年，“飞行汽车”的概念炙手可热。美国网约车巨头优步（Uber）推出的 Uber Air 计划于
                    明年进行试飞演示，并于 2023 年启动商业飞行。目前，优步已选定达拉斯、洛杉矶、墨尔本为 Uber Air
                    的首批服务城市。</p>
                <!-- 注意(错误用法):段落标签不能嵌套div使用(都是块标签，都占一行挤开了) -->
                <div>hello1<p>hello</p>hello2</div>
                <p>hello1<div>hello</div>hello2</p>
            <!-- 6.换行 <br />-->
                12<br />34

        <!--行内标签:[1]并排排列，不能设置宽高。内容撑开宽高。 [2]默认存在间隙,间隙由代码的回车造成。-->
            <!-- 1.span：无语义行内标签，一般作用容器使用。 -->
            <!-- 行内元素作为容器不能容纳块元素 -->
            <span style="background: red;border: solid">hello<span style="background: gray;">hello2</span></span>

            <!--2.img：有语义行内标签，专门用于显示图片。src 属性用于指定图片地址（网络、本地、、base64）。-->
            <!--TIPS:img是可以设置宽高的,alt 属性表示图片加载失败的提示文本,title 属性表示鼠标悬停时的提示文本-->
                <!-- 1.网络图片 -->
            <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="100px" height="80px" alt=""/>
                <!-- 2.本地图片 -->
            <!--TIPS：这边引入绝对路径和相对路径的概念-->
            <!--绝对路径:从盘符开始的路径就是绝对路径。-->
            <img src="C:\Users\Administrator\Desktop\mi.webp" alt="绝对" title="错了"/>
            <!--相对路径:相对于当前路径的路径。当前操作的文件所在的路径即为当前路径，用.表示，可以省略。-->
            <img src="./imgs/mi.webp" alt="相对" width="100px" height="80px"/>
            <img src="imgs/mi.webp" alt="相对" width="100px" height="80px"/>
                <!-- 3.Base64 -->
            <!-- https://base64.us/ -->
            <img src="" alt="Base64">
        <!--TIPS：如果一个标签显示的结果由属性决定，这种标签称为可替换标签。可替换标签有一个特性:可以设置宽和高。-->

            <!-- 3.a：有语义行内标签，表示链接。href 属性表示链接的地址(网络地址/本地地址/锚点)。title 属性表示鼠标悬停时的提示文本 -->
            <a href="http://www.baidu.com/" title="百度一下，你就上当">百度</a>
            <a href="F:\0805-j\html\html01\code\index08.html">绝对</a>
            <a href="./html5基础知识汇总.html">自己</a>
                <!-- 锚点:页面内跳转-->
                <ul>
                    <li><a href="#young">早年经历</a></li>
                    <li><a href="#act">演艺经历</a></li>
                </ul>
                <div id="young">
                    <h3>早年经历</h3>
                    <p>内容</p>
                </div>
                <div id="act">
                    <h3>演艺经历</h3>
                    <p>内容</p>
                </div>
                <!--空链接-->
                <a href="#">空链接</a>

            <!-- 4.var/strong/em 有语义行内标签，表示强调标签。-->
                <var>我是强调</var>
                <strong>我也是强调</strong>
                <em>我还是强调</em>

            <!-- 5.-->
                <!--  ../ 表示上一层目录  -->
                <a href="../">上一层目录</a>
                <!--  ./ 表示当前目录  -->
                <a href="./">当前目录</a>
    </body>
</html>